<template>
  <div class="list-container">
    <!-- 月劳务发放,项目方可以生成工资单 -->
    <el-form class="search-panel" v-model="searchData" :inline="true">
      <el-form-item
        class="search-time"
        label="考勤时间："
        prop="startToEnd"
      >
        <el-date-picker
          style="width: 250px"
          v-model="searchData.startToEnd"
          type="monthrange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <!-- <el-tag>项目方</el-tag> -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          type="index"
          label="序号"
          width="55"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="attendanceDate" min-width="100" label="考勤时间" align="center">
        </el-table-column>
        <el-table-column prop="monthWageConfirmedNum" min-width="90" label="月工资单已确认人数" align="center">
        </el-table-column>
        <el-table-column prop="actualMonthWageTotal" min-width="120" label="实际工资合计" align="center">
          <template slot-scope="scope">
            <div>¥{{ scope.row.actualMonthWageTotal }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="shouldIssuedMonthlyWage"
          label="实发生活费合计"
          min-width="130"
          align="center"
        >
          <template slot-scope="scope">
            <div>¥{{ scope.row.shouldIssuedMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="issuedMonthlyWage" min-width="100" label="已发放金额" align="center">
          <template slot-scope="scope">
            <div>¥{{ scope.row.issuedMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="unissuedMonthlyWage"
          label="剩余金额"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <div>¥{{ scope.row.unissuedMonthlyWage }}</div>
          </template>
        </el-table-column>
        <!--项目方未提交-->
        <!-- <el-table-column prop="confirm" label="确认状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.confirm == 0">未提交</div>
            <div v-else-if="scope.row.confirm == 1">未确认</div>
            <div v-else-if="scope.row.confirm == 2">已确认</div>
            <div v-else>已发放</div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="detail" label="请款说明" align="center">
        </el-table-column> -->
        <el-table-column
          prop="operation"
          label="操作"
          align="center"
          width="250px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              @click="generatePayroll(scope.row)"
              type="text"
              icon="el-icon-edit-outline"
              >生成发放工资单</el-button
            >
            <el-button
              @click="issuanceRecord(scope.row)"
              type="text"
              icon="el-icon-document"
              >发放记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(total / searchData.pageSize) }}页/{{ total }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchData.currentPage"
          :page-sizes="[2,10, 20, 50]"
          :page-size="searchData.pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import { monthWageList } from "@/api/monthlyWage";
export default {
  data() {
    return {
      searchData: {
        startToEnd: null,
        pageSize: 10,
        currentPage: 1,
      },
      tableData: [{ attendanceTime: "2021年10月" }],
      total: 0,
    };
  },
  methods: {
    getTableData() {
      let data = {
        commit:0,
        pageSize:this.searchData.pageSize,
        currentPage:this.searchData.currentPage,
        startDate:this.searchData.startDate,
        endDate:this.searchData.endDate,
        status:3
      }
      monthWageList(data).then((res)=>{
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      });
    },
    onSubmit() {
      this.searchData.startDate = this.searchData.startToEnd[0]
      this.searchData.endDate = this.searchData.startToEnd[1]
      this.getTableData()
      // console.log(this.searchData);
    },
    // 生成工资单
    generatePayroll(row) {
      this.$router.push({ path: "/agency/chooseCorp",query:{date:row.attendanceDate} });
    },
    // 发放记录
    issuanceRecord(date) {
      this.$router.push({ path: "/agency/record" });
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.searchData.currentPage = val
      this.getTableData()
    },
  },
  // mounted(){
  //   this.getTableData()
  // },
  created(){
    this.getTableData()
  }

};
</script>
